<template>
  <div>
    <el-card style="box-sizing:border-box;padding:30px">

      <template>
        <el-form :model="queryParams">
          <div style="display:flex;flex-direction:row;margin-bottom:20px">
            <p style="margin-top:9px;margin-right:15px;font-weight:500;">选择应用:</p>
            <el-form-item label="" class="table-head-layout">
              <el-select v-model="queryParams.appId" @change="changeAppId" style="width:300px;border-radius:4px;">
                <el-option
                  v-for="(item) in mchAppList || []"
                  :key="item.appId"
                  :label="`${item.appName} [${item.appId}]`"
                  :value="item.appId"
                ></el-option>
              </el-select>
            </el-form-item>
          </div>
        </el-form>
      </template>

      <!-- 未配置支付方式提示框 -->
      <el-divider v-if="!appId">请选择应用APPID</el-divider>
      <el-divider v-else-if="noConfigText">您尚未配置任何支付方式</el-divider>
      <el-divider v-else></el-divider>

      <!-- 支付测试面板 v-if=""-->
      <div style="width: 100%;" class="paydemo" v-if="payTestShow()">
        <div class="paydemo-type-content">
          <div class="paydemo-type-name article-title" v-show="showTitle('WX')" >微信支付</div>
          <div class="paydemo-type-body">
            <div class="paydemo-type color-change" v-show="appPaywayList.indexOf('WX_NATIVE') >= 0" @click="changeCurrentWayCode('WX_NATIVE', 'codeImgUrl')" :class="{this:(currentWayCode === 'WX_NATIVE')}">
              <span class="color-change">微信二维码</span>
            </div>
            <div class="paydemo-type color-change" v-show="appPaywayList.indexOf('WX_BAR') >= 0" @click="changeCurrentWayCode('WX_BAR', '')" :class="{this:(currentWayCode === 'WX_BAR')}">
              <span class="color-change">微信条码</span>
            </div>
            <div class="paydemo-type color-change" v-show="appPaywayList.indexOf('WX_JSAPI') >= 0" @click="changeCurrentWayCode('WX_JSAPI', 'codeImgUrl')" :class="{this:(currentWayCode === 'WX_JSAPI')}">
              <span class="color-change">公众号/小程序</span>
            </div>
            <div class="paydemo-type color-change" v-show="appPaywayList.indexOf('WX_H5') >= 0" @click="changeCurrentWayCode('WX_H5', 'payurl')" :class="{this:(currentWayCode === 'WX_H5')}">
              <span class="color-change">微信H5</span>
            </div>
          </div>
          <div class="paydemo-type-name article-title" v-show="showTitle('ALI')">支付宝支付</div>
          <div class="paydemo-type-body">
            <div class="paydemo-type color-change" v-show="appPaywayList.indexOf('ALI_QR') >= 0" @click="changeCurrentWayCode('ALI_QR', 'codeImgUrl')" :class="{this:(currentWayCode === 'ALI_QR')}">
              <span class="color-change">支付宝二维码</span>
            </div>
            <div class="paydemo-type color-change" v-show="appPaywayList.indexOf('ALI_BAR') >= 0" @click="changeCurrentWayCode('ALI_BAR', '')" :class="{this:(currentWayCode === 'ALI_BAR')}">
              <span class="color-change">支付宝条码</span>
            </div>
            <div class="paydemo-type color-change" v-show="appPaywayList.indexOf('ALI_JSAPI') >= 0" @click="changeCurrentWayCode('ALI_JSAPI', 'codeImgUrl')" :class="{this:(currentWayCode === 'ALI_JSAPI')}">
              <span class="color-change">支付宝生活号</span>
            </div>
            <div class="paydemo-type color-change" v-show="appPaywayList.indexOf('ALI_PC') >= 0" @click="changeCurrentWayCode('ALI_PC', 'payurl')" :class="{this:(currentWayCode === 'ALI_PC')}">
              <span class="color-change">支付宝PC网站</span>
            </div>
            <div class="paydemo-type color-change" v-show="appPaywayList.indexOf('ALI_WAP') >= 0" @click="changeCurrentWayCode('ALI_WAP', 'payurl')" :class="{this:(currentWayCode === 'ALI_WAP')}">
              <span class="color-change">支付宝WAP</span>
            </div>
            <div class="paydemo-type color-change" v-show="appPaywayList.indexOf('ALI_OC') >= 0" @click="changeCurrentWayCode('ALI_OC', 'codeImgUrl')" :class="{this:(currentWayCode === 'ALI_OC')}">
              <span class="color-change">支付宝订单码</span>
            </div>
          </div>
        </div>

        <el-divider />
        <!-- 订单信息 -->
        <div class="paydemo-type-content">
          <div class="paydemo-type-name article-title">支付信息</div>
          <form class="layui-form">
            <div class="paydemo-form-item">
              <label>订单编号：</label><span id="payMchOrderNo">{{ mchOrderNo }}</span>
              <span @click="randomOrderNo" class=" paydemo-btn" style="padding:0 3px">刷新订单号</span>
            </div>
            <div class="paydemo-form-item">
              <label>订单标题：</label>
              <el-input v-model="orderTitle" style="width: 200px"/>
            </div>


            <el-divider />

            <div class="paydemo-form-item">
              <span>支付金额(元)：</span>
                    <el-input-number
                      ref="amountInputFocus"
                      :max="100000"
                      :min="1"
                      v-model="paytestAmount"
                      :precision="2"
                      @blur="amountInput = false"
                    >
                    </el-input-number>
            </div>

            <div style="margin-top:20px;text-align: left">
              <el-button type="primary" @click="immediatelyPay">立即支付</el-button>
            </div>
          </form>
        </div>
      </div>
    </el-card>
    <!-- 二维码弹窗 -->
    <pay-test-modal ref="payTestModal" @closeBarCode="$refs.payTestBarCode.visible = false" ></pay-test-modal>

    <!-- 条码弹框 -->
    <pay-test-bar-code ref="payTestBarCode" @barCodeValue="barCodeChange" @CodeAgainChange="testCodeChange"></pay-test-bar-code>
  </div>
</template>

<style>
  @import './payTestStyle.css';
</style>
<script src="./js/payTest.js"></script>
